<template>
	<view class="homePage">
		<view class="banner">
			<view class="banner_in">
				<view class="banner_in_header">
					<view class="banner_in_header_l">
						<!-- <image v-if="showDefaultLogo" src="../../static/index/photo.png" mode="widthFix"></image> -->
						<image v-if="headerlogo.length>0" :src="headerlogo" mode="widthFix"></image>
						<text>{{username}}</text>
					</view>
					<view class="banner_in_header_r" v-if="flag">
						<image src="../../static/index/Shopping.png" mode="widthFix"></image>
						<text>购物车</text>
						<view>{{cartTotal}}</view>
					</view>
					<view class="banner_in_header_r" v-else>
						<view class="banner_in_header_r_btn" @click="goLoginPage">登录</view>
					</view>
				</view>
				<view class="banner_in_total">
					<view class="banner_in_total_up">总积分</view>
					<view class="banner_in_total_down">{{coin}}</view>
				</view>
				<view class="banner_in_jifen">
					<view class="banner_in_jifen_l">
						<view>{{balance}}</view>
						<view>可用积分</view>
					</view>
					<view class="banner_in_jifen_r">
						<view>{{freezeCoin}}</view>
						<view>冻结积分</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nav">
			<view @click="goUserPageFn">个人中心</view>
			<view>我的订单</view>
			<view>积分明细</view>
			<view>专属福利</view>
		</view>
		<view class="title">
			<view class="title_l">
				<image src="../../static/index/Recommend.png" mode="widthFix"></image>
				<text>{{jingpinTitle}}</text>
			</view>
			<view class="title_r">
				<text>更多</text>
				<image src="../../static/index/More.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="product">
			<view class="product_box"  v-for="(item,index) in jingpinArr" :key="item.id">
				<image :src="'http://gz.wolfcode.cn' + item.coverImg" mode="widthFix"></image>
				<view class="product_box_title">{{item.title}}</view>
				<view class="product_box_coin">{{item.coin}}积分</view>
				<view class="product_box_btn">立即兑换</view>
				<image class="tips" v-if="item.isHotSale == 1" mode="widthFix" src="../../static/index/hot-j.png"></image>
				<image class="tips" v-if="item.isLatest == 1" mode="widthFix" src="../../static/index/new.png"></image>
			</view>
		</view>
		<view class="title">
			<view class="title_l">
				<image src="../../static/index/hot.png" mode="widthFix"></image>
				<text>{{hotTitle}}</text>
			</view>
			<view class="title_r">
				<text>更多</text>
				<image src="../../static/index/More.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="ad">
			<image src="../../static/index/banner.png" mode="widthFix"></image>
		</view>
		<view class="product">
			<view class="product_box"  v-for="(item,index) in hotArr" :key="item.id">
				<image :src="'http://gz.wolfcode.cn' + item.coverImg" mode="widthFix"></image>
				<view class="product_box_title">{{item.title}}</view>
				<view class="product_box_coin">{{item.coin}}积分</view>
				<view class="product_box_btn">立即兑换</view>
				<image class="tips" v-if="item.isHotSale == 1" mode="widthFix" src="../../static/index/hot-j.png"></image>
				<image class="tips" v-if="item.isLatest == 0" mode="widthFix" src="../../static/index/new.png"></image>
			</view>
		</view>
		<view class="seach_all">
			<view class="seach_all_btn">查看全部商品</view>
		</view>
		<view class="title">
			<view class="title_l">
				<image src="../../static/index/integral.png" mode="widthFix"></image>
				<text>积分攻略</text>
			</view>
		</view>
		<view class="gonglve">
			<image src="../../static/index/integral-01.png" mode="widthFix"></image>
			<image src="../../static/index/integral-02.png" mode="widthFix"></image>
			<image src="../../static/index/integral-03.png" mode="widthFix"></image>
			<image src="../../static/index/integral-04.png" mode="widthFix"></image>
		</view>
		<view class="footer">
			<view>
				<image style="position: absolute; left: 85rpx;" src="../../static/index/service.png" mode="widthFix"></image>
				<!-- <text >在线客服</text> -->
				<button style="background-color: #0a328e; color: #fff; font-size: 28rpx; outline: none; plain" open-type="contact">在线客服</button>
			</view>
			<view>
				<image src="../../static/index/phone.png" mode="widthFix"></image>
				<text  @click="phone">电话咨询</text>
				<!-- <button style="background-color: #0a328e; color: #fff; font-size: 28rpx; outline: none; plain" open-type="contact">电话咨询</button> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {getUserInfoFn,getRecommendFn,getHotFn} from '../../request/fetch.js'
	export default {
		data() {
			return {
				// 热门推荐的标题
				hotTitle:"",
				// 精品推荐的标题
				jingpinTitle:"",
				// 用户名
				username:"游客",
				// 是否登录
				flag:false,
				// 购物车
				cartTotal:0,
				// 头像
				headerlogo:require('../../static/index/photo.png'),
				// 总积分
				coin:'--',
				// 可用积分
				balance:'--',
				// 冻结积分
				freezeCoin:'--',
				// 精品推荐数组
				jingpinArr:[],
				// 热门推荐数组
				hotArr:[]
			
			}
		},
		async onShow() {
			let _this = this;
			// 每次进入页面，都判断是否已登录
			let token = await this.ifLoginFn();
			if(token){
				_this.flag = true;
				// 做请求，获取用户信息
				getUserInfoFn({
					'x-auth-token':token
				}).then(res=>{
					console.log(res)
					if(res.code == 0){
						// _this.showDefaultLogo = false;   // 显示用户的头像
						_this.cartTotal = res.data.cartTotal;
						_this.username = res.data.userInfo.nickName;
						_this.headerlogo = res.data.userInfo.headImg;
						_this.coin = res.data.userInfo.coin;
						_this.balance = res.data.userInfo.balance;
						_this.freezeCoin = res.data.userInfo.freezeCoin;
					}
				})
			}
		},
		onLoad() {
			let _this = this;
			// 获取精品推荐
			getRecommendFn().then(res=>{
				if(res.code == 0){
					this.jingpinTitle = res.data.name;
					// console.log(res.data.data.records.splice(0,3));
					_this.jingpinArr = res.data.data.records.splice(0,3)
				}
			})
			// 获取热门兑换
			getHotFn().then(res=>{
				if(res.code == 0){
					this.hotTitle = res.data.name;
					// console.log(res.data.data.records.splice(0,3));
					_this.hotArr = res.data.data.records.splice(0,3)
				}
			})
		},
		methods: {
			// 联系电话
			phone(){
				uni.makePhoneCall({
					phoneNumber:'186-3113-4830'
				})
			},
			// 判断是否登录
			ifLoginFn(){
				return new Promise((resolve,reject)=>{
					uni.getStorage({
						key:'wolfcode-token',
						success:function(res){
							resolve(res.data);
						},
						fail:function(err){
							reject(err)
						}
					});
				}).catch(e=>{})
			},
			// 跳转去登录页
			goLoginPage(){
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			// 跳转去个人中心页
			goUserPageFn(){
				uni.navigateTo({
					url:"/pages/user/user"
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f8f6f9;
	}
	.homePage{
		.banner{
			color: #fff;
			height: 448rpx;
			background: url(../../static/index/bg.png) no-repeat center bottom;
			background-size: contain;
			padding: 31rpx 35rpx 0;
			font-size: 24rpx;
			font-family: "黑体";
			.banner_in{
				// background: pink;
				width: 100%;
				padding:  40rpx 30rpx 0;
				box-sizing: border-box;
				.banner_in_header{
					display: flex;
					justify-content: space-between;
					height: 48rpx;
					margin-bottom: 55rpx;
					.banner_in_header_l{
						display: flex;
						align-items: center;
						image{
							width: 48rpx;
							margin-left: 10rpx;
							margin-right: 10rpx;
						}
					}
					.banner_in_header_r{
						display: flex;
						align-items: center;
						image{
							width: 27rpx;
						}
						text{
							margin-left: 10rpx;
							margin-right: 10rpx;
						}
						view{
							width: 22rpx;
							height: 22rpx;
							background:#fd604d;
							border-radius: 50%;
							text-align: center;
							line-height: 22rpx;
							font-size: 20rpx;
						}
						.banner_in_header_r_btn{
							width: 80rpx;
							height: 40rpx;
							line-height: 40rpx;
							text-align: center;
							background: #fff;
							border-radius: 40rpx;
							color: #007AFF;
							font-size: 26rpx;
						}
					}
				}
				.banner_in_total{
					text-align: center;
					margin-bottom: 64rpx;
					.banner_in_total_up{
						height: 26rpx;
						line-height: 26rpx;
						font-size: 26rpx;
						margin-bottom: 25rpx;
					}
					.banner_in_total_down{
						height: 60rpx;
						line-height: 60rpx;
						font-size: 60rpx;
						font-weight: bold;
					}
				}
				.banner_in_jifen{
					display: flex;
					justify-content: space-between;
					&>view{
						text-align: center;
						width: 50%;
						font-size: 28rpx;
					}
				}
			}
		}
		.nav{
			padding: 0 35rpx;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333333;
			font-size: 28rpx;
		}
		.title{
			height: 98rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 35rpx;
			.title_l{
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: bold;
				image{
					width: 40rpx;
					margin-right: 10rpx;
				}
			}
			.title_r{
				display: flex;
				align-items: center;
				font-size: 22rpx;
				
				image{
					width: 20rpx;
					margin-left: 10rpx;
				}
			}
		}
		.product{
			margin-bottom: 7rpx;
			padding: 0 35rpx;
			display: flex;
			justify-content: space-between;
			.product_box{
				width: 215rpx;
				background: #fff;
				height: 429rpx;
				text-align: center;
				position: relative;
				.tips{
					position: absolute;
					left: 0;
					top: 0;
					width: 58rpx;
				}
				image{
					display: block;
					width: 100%;
					margin-bottom: 20rpx;
				}
				.product_box_title{
					height: 24rpx;
					line-height: 24rpx;
					font-size: 24rpx;
					margin-bottom: 21rpx;
				}
				.product_box_coin{
					color: #ff5e0f;
					height: 24rpx;
					line-height: 24rpx;
					font-size: 24rpx;
					margin-bottom: 13rpx;
				}
				.product_box_btn{
					width: 140rpx;
					height: 46rpx;
					line-height: 46rpx;
					border: 2rpx solid #0a328e;
					box-sizing: border-box;
					border-radius: 6rpx;
					margin: auto;
					font-size: 22rpx;
					color: #0a328e;
				}
			}
		}
		.ad{
			padding: 0 35rpx;
			margin-bottom: 30rpx;
			image{
				width: 100%;
				display: block;
			}
		}
		.seach_all{
			color: #fff;
			padding: 0 35rpx;
			margin-top: 40rpx;
			margin-bottom: 10rpx;
			.seach_all_btn{
				background: #0a328e;
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 27rpx;
			}
		}
		.gonglve{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 0 35rpx;
			margin-bottom: 28rpx;
			image{
				width: 328rpx;
				display: block;
				margin-bottom: 22rpx;
			}
		}
		.footer{
			padding: 19rpx 35rpx;
			background: #0a328e;
			// background: $shop-color;
			color: #fff;
			display: flex;
			justify-content: space-between;
			view{
				width: 50%;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				image{
					width: 42rpx;
					margin-right: 23rpx;
				}
				button::after{ 
				    border: none; 
				}
				&:nth-of-type(1){
					border-right: 2rpx solid #164ac1;
				}
			}
		}
	}
</style>
